Home - CNIB Access Labs
Status Statut
Tested Testé
Last Tested Dernier test
2025-12-02 17:11:41
Issues Found Problèmes trouvés
314 Errors Erreurs, 121 Warnings Avertissements
Score Score
46%
Accessibility Score Score d'accessibilité
Based on automated checks Basé sur des vérifications automatisées
Compliance Score Score de conformité
20 / 32 tests passed tests réussis
Issues Found Problèmes trouvés
Filter Test Results Filtrer les résultats
Latest Test Results Derniers résultats de test
Tested on Testé le 2025-12-02 17:11:41Errors Erreurs (314)
aria-label doesn't match visible text aria-label ne correspond pas au texte visible
About this issue:
aria-label doesn't match visible text
aria-label ne correspond pas au texte visible
Voice control users can't activate element
Les utilisateurs de commande vocale ne peuvent pas activer l'élément
Voice control users
Utilisateurs de commande vocale
Relevant test criteria: Critères de test pertinents :
- 2.5.3 Label in Name (Level A) 2.5.3 Étiquette dans le nom (Niveau A)
Touchpoint Accessible Names Noms accessibles
Impact Medium Moyen
WCAG 2.5.3 Label in Name (Level A) WCAG 2.5.3 Étiquette dans le nom (Niveau A)
Location
/html[1]/body[1]/header[1]/nav[1]
Code Snippet
<nav class="menubar-wrapper" aria-label="Header Navigation">
<div class="menubar menubar-desktop">
<div class="menu-wrapper primary-navigation"><ul id="menu-main-menu" c
aria-label doesn't match visible text aria-label ne correspond pas au texte visible
About this issue:
aria-label doesn't match visible text
aria-label ne correspond pas au texte visible
Voice control users can't activate element
Les utilisateurs de commande vocale ne peuvent pas activer l'élément
Voice control users
Utilisateurs de commande vocale
Relevant test criteria: Critères de test pertinents :
- 2.5.3 Label in Name (Level A) 2.5.3 Étiquette dans le nom (Niveau A)
Touchpoint Accessible Names Noms accessibles
Impact Medium Moyen
WCAG 2.5.3 Label in Name (Level A) WCAG 2.5.3 Étiquette dans le nom (Niveau A)
Location
/html[1]/body[1]/footer[1]
Code Snippet
<footer role="contentinfo" aria-label="Footer">
<div class="footer-area-top entry-container">
<div class="container">
aria-label doesn't match visible text aria-label ne correspond pas au texte visible
About this issue:
aria-label doesn't match visible text
aria-label ne correspond pas au texte visible
Voice control users can't activate element
Les utilisateurs de commande vocale ne peuvent pas activer l'élément
Voice control users
Utilisateurs de commande vocale
Relevant test criteria: Critères de test pertinents :
- 2.5.3 Label in Name (Level A) 2.5.3 Étiquette dans le nom (Niveau A)
Touchpoint Accessible Names Noms accessibles
Impact Medium Moyen
WCAG 2.5.3 Label in Name (Level A) WCAG 2.5.3 Étiquette dans le nom (Niveau A)
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[3]/nav[1]
Code Snippet
<nav aria-label="Footer Navigation"><ul class="footer-submenu wp-block-list">
<li><strong><a href="https://cnib-accesslabs.ca/about-us/" data-type="page" data-id="12">About Us</a></strong></li>
<li
Navigation menu lacks proper ARIA markup Le menu de navigation manque de balisage ARIA approprié
About this issue:
Navigation menu lacks proper ARIA markup
Le menu de navigation manque de balisage ARIA approprié
Screen readers won't recognize this as a navigation menu
Les lecteurs d'écran ne reconnaîtront pas ceci comme un menu de navigation
Screen reader users
Utilisateurs de lecteurs d'écran
Relevant test criteria: Critères de test pertinents :
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Accessible Names Noms accessibles
Impact High Élevé
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/header[1]/nav[1]/div[1]
Code Snippet
<div class="menubar menubar-desktop">
<div class="menu-wrapper primary-navigation"><ul id="menu-main-menu" class="mainmenu">
<li
Navigation menu lacks proper ARIA markup Le menu de navigation manque de balisage ARIA approprié
About this issue:
Navigation menu lacks proper ARIA markup
Le menu de navigation manque de balisage ARIA approprié
Screen readers won't recognize this as a navigation menu
Les lecteurs d'écran ne reconnaîtront pas ceci comme un menu de navigation
Screen reader users
Utilisateurs de lecteurs d'écran
Relevant test criteria: Critères de test pertinents :
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Accessible Names Noms accessibles
Impact High Élevé
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/header[1]/nav[1]/div[3]
Code Snippet
<div class="menubar menubar-mobile">
<div class="menu-wrapper primary-navigation"><ul id="menu-main-menu-1" class="mainmenu">
<l
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 320px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 320px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 320px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 320px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 320px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 320px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 320px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 320px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 481px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 481px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 481px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 481px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 481px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 481px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 481px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 481px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 482px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 482px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 482px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 482px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 482px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 482px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 482px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 482px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 575px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 575px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 575px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 575px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 575px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 575px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 575px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 575px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 576px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 576px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 576px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 576px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 576px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 576px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 576px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 576px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 592px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 592px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 592px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 592px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 592px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 592px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 592px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 592px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 600px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 600px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 600px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 600px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 600px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 600px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 600px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 600px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 652px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 652px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 652px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 652px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 652px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 652px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 652px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 652px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 767px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 767px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 767px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 767px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 767px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 767px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 767px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 767px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 768px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 768px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 768px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 768px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 768px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 768px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 768px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 768px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 781px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 781px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 781px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 781px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 781px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 781px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 781px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 781px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 782px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 782px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 782px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 782px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 782px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 782px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 782px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 782px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 822px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 822px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 822px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 822px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 822px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 822px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 822px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 822px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 991px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 991px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 991px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 991px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 991px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 991px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 991px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 991px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 992px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 992px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 992px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 992px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 992px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 992px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 992px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 992px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1024px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1024px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1024px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1024px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1024px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1024px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1024px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1024px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1080px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1080px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1080px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1080px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1080px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1080px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1080px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1080px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1199px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1199px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1199px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1199px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1199px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1199px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1199px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1199px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1200px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1200px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1200px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1200px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1200px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1200px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1200px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1200px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1290px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1290px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1290px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1290px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1290px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1290px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1290px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1290px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1340px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1340px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1340px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1340px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1340px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1340px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1340px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1340px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1341px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1341px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1341px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1341px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1341px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1341px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1341px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1341px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1389px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1389px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1389px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1389px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1389px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1389px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1389px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1389px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1399px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1399px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1399px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1399px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1399px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1399px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1399px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1399px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_heading-id-gsbp-b5306e1"]/strong[1]/strong[1]
Responsive Breakpoint 1500px width
Code Snippet
<strong>Your partner in inclusive design</strong>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]
Responsive Breakpoint 1500px width
Code Snippet
<p>Revolutionize customer journeys throughout built environments and empower digital experiences. In addition to our unparalleled expertise in accessibility standards and legislation, we go beyo
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Responsive Breakpoint 1500px width
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[1]/span[2]/a[1]
Responsive Breakpoint 1500px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[2]/span[2]/a[1]
Responsive Breakpoint 1500px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[3]/span[2]/a[1]
Responsive Breakpoint 1500px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[4]/span[2]/a[1]
Responsive Breakpoint 1500px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)
Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.
Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.
Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger
Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand
Relevant test criteria: Critères de test pertinents :
- 1.4.3 Contrast (Minimum) (Level AA) 1.4.3 Contrast (Minimum) (Level AA)
Touchpoint Colors Couleurs
Impact High Élevé
WCAG 1.4.3 Contrast (Minimum) (Level AA) WCAG 1.4.3 Contrast (Minimum) (Level AA)
Location
//*[@id="gspb_iconsList-id-gsbp-effdb2d7-ec18"]/ul[1]/li[5]/span[2]/a[1]
Responsive Breakpoint 1500px width
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Alt text exceeds 150 characters without proper structure, making it difficult for screen reader users to process Le texte alternatif dépasse 150 caractères sans structure appropriée, rendant difficile le traitement pour les utilisateurs de lecteurs d'écran
About this issue:
Alt text exceeds 150 characters without proper structure, making it difficult for screen reader users to process
Le texte alternatif dépasse 150 caractères sans structure appropriée, rendant difficile le traitement pour les utilisateurs de lecteurs d'écran
This fails WCAG 5.2.4 Accessibility Supported because even though the page technically meets WCAG success criteria by providing alt text, it does not work properly with assistive technology (screen readers). Screen readers read alt text as a continuous unstructured string without the ability to navigate, skim, or use reading commands that work with properly structured HTML. Long alt text removes screen reader users' ability to use headings navigation, paragraph jumps, list navigation, and other assistive technology features that sighted users take for granted when reading long descriptions. The content may be technically present but is not accessibility-supported because it cannot be effectively used with the user's assistive technology.
Ceci échoue au WCAG 5.2.4 Prise en charge de l'accessibilité car même si la page respecte techniquement les critères de succès WCAG en fournissant un texte alternatif, elle ne fonctionne pas correctement avec les technologies d'assistance (lecteurs d'écran). Les lecteurs d'écran lisent le texte alternatif comme une chaîne continue non structurée sans la possibilité de naviguer, parcourir, ou utiliser les commandes de lecture qui fonctionnent avec du HTML correctement structuré. Un texte alternatif long supprime la capacité des utilisateurs de lecteurs d'écran à utiliser la navigation par titres, les sauts de paragraphe, la navigation par listes, et autres fonctionnalités de technologies d'assistance que les utilisateurs voyants tiennent pour acquises lors de la lecture de descriptions longues. Le contenu peut être techniquement présent mais n'est pas pris en charge par l'accessibilité car il ne peut pas être utilisé efficacement avec la technologie d'assistance de l'utilisateur.
Screen reader users who must listen to lengthy unstructured descriptions without visual scanning or paragraph breaks, users with cognitive disabilities who struggle with processing long blocks of text without structure, users with attention difficulties who need clear information hierarchy, users with memory challenges who cannot retain long unbroken text passages
Utilisateurs de lecteurs d'écran qui doivent écouter de longues descriptions non structurées sans balayage visuel ou sauts de paragraphe, utilisateurs avec des handicaps cognitifs qui ont des difficultés à traiter de longs blocs de texte sans structure, utilisateurs avec des difficultés d'attention qui ont besoin d'une hiérarchie d'information claire, utilisateurs avec des défis de mémoire qui ne peuvent pas retenir de longs passages de texte ininterrompus
Relevant test criteria: Critères de test pertinents :
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Images Images
Impact Medium Moyen
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[1]/div[1]/div[1]/div[2]/figure[1]/img[1]
Code Snippet
<img data-recalc-dims="1" decoding="async" width="620" height="412" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2023/08/iStock-1331470022.jpg?resize=620%2C412&ssl=1" alt="Diverse
Alt text exceeds 150 characters without proper structure, making it difficult for screen reader users to process Le texte alternatif dépasse 150 caractères sans structure appropriée, rendant difficile le traitement pour les utilisateurs de lecteurs d'écran
About this issue:
Alt text exceeds 150 characters without proper structure, making it difficult for screen reader users to process
Le texte alternatif dépasse 150 caractères sans structure appropriée, rendant difficile le traitement pour les utilisateurs de lecteurs d'écran
This fails WCAG 5.2.4 Accessibility Supported because even though the page technically meets WCAG success criteria by providing alt text, it does not work properly with assistive technology (screen readers). Screen readers read alt text as a continuous unstructured string without the ability to navigate, skim, or use reading commands that work with properly structured HTML. Long alt text removes screen reader users' ability to use headings navigation, paragraph jumps, list navigation, and other assistive technology features that sighted users take for granted when reading long descriptions. The content may be technically present but is not accessibility-supported because it cannot be effectively used with the user's assistive technology.
Ceci échoue au WCAG 5.2.4 Prise en charge de l'accessibilité car même si la page respecte techniquement les critères de succès WCAG en fournissant un texte alternatif, elle ne fonctionne pas correctement avec les technologies d'assistance (lecteurs d'écran). Les lecteurs d'écran lisent le texte alternatif comme une chaîne continue non structurée sans la possibilité de naviguer, parcourir, ou utiliser les commandes de lecture qui fonctionnent avec du HTML correctement structuré. Un texte alternatif long supprime la capacité des utilisateurs de lecteurs d'écran à utiliser la navigation par titres, les sauts de paragraphe, la navigation par listes, et autres fonctionnalités de technologies d'assistance que les utilisateurs voyants tiennent pour acquises lors de la lecture de descriptions longues. Le contenu peut être techniquement présent mais n'est pas pris en charge par l'accessibilité car il ne peut pas être utilisé efficacement avec la technologie d'assistance de l'utilisateur.
Screen reader users who must listen to lengthy unstructured descriptions without visual scanning or paragraph breaks, users with cognitive disabilities who struggle with processing long blocks of text without structure, users with attention difficulties who need clear information hierarchy, users with memory challenges who cannot retain long unbroken text passages
Utilisateurs de lecteurs d'écran qui doivent écouter de longues descriptions non structurées sans balayage visuel ou sauts de paragraphe, utilisateurs avec des handicaps cognitifs qui ont des difficultés à traiter de longs blocs de texte sans structure, utilisateurs avec des difficultés d'attention qui ont besoin d'une hiérarchie d'information claire, utilisateurs avec des défis de mémoire qui ne peuvent pas retenir de longs passages de texte ininterrompus
Relevant test criteria: Critères de test pertinents :
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Images Images
Impact Medium Moyen
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[1]/figure[1]/img[1]
Code Snippet
<img data-recalc-dims="1" decoding="async" width="620" height="414" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2023/08/AdobeStock_358588860_contrast-1.png?resize=620%2C414&ssl=1"
Alt text contains redundant words like "image of" or "picture of" Le texte alternatif contient des mots redondants comme « image de » ou « photo de »
About this issue:
Alt text contains redundant words like "image of" or "picture of"
Le texte alternatif contient des mots redondants comme « image de » ou « photo de »
Screen readers already announce images as images, so these phrases create redundant announcements.
Les lecteurs d'écran annoncent déjà les images comme des images, ces expressions créent donc des annonces redondantes.
Screen reader users who hear repetitive "image image of" announcements.
Utilisateurs de lecteurs d'écran qui entendent des annonces répétitives « image image de ».
Relevant test criteria: Critères de test pertinents :
- 1.1.1 Non-text Content (Level A) 1.1.1 Contenu non textuel (Niveau A)
Touchpoint Images Images
Impact Low Faible
WCAG 1.1.1 Non-text Content (Level A) WCAG 1.1.1 Contenu non textuel (Niveau A)
Location
/html[1]/body[1]/main[1]/div[1]/div[12]/div[2]/div[1]/img[1]
Code Snippet
<img loading="lazy" decoding="async" width="620" height="325" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2024/05/Access-Labs-PCL-graphics-article-1.png?fit=620%2C325&ssl=1" class
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
About this issue:
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image
L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
Inline SVG elements are not automatically treated as images by assistive technologies. Without role="img", screen readers may traverse the SVG's internal DOM structure (paths, circles, polygons), announcing confusing technical details instead of the image's meaning. Some screen readers skip unlabeled SVGs entirely. The role="img" attribute signals to assistive technologies that the SVG should be treated as a single image unit with an accessible name, just like an HTML img element. This is required for static SVG graphics (icons, logos, illustrations) but not for interactive SVG widgets or purely decorative SVGs (which should use aria-hidden="true").
Les éléments SVG en ligne ne sont pas automatiquement traités comme des images par les technologies d'assistance. Sans role="img", les lecteurs d'écran peuvent parcourir la structure DOM interne du SVG (chemins, cercles, polygones), annonçant des détails techniques confus au lieu de la signification de l'image. Certains lecteurs d'écran ignorent entièrement les SVG non étiquetés. L'attribut role="img" signale aux technologies d'assistance que le SVG doit être traité comme une unité d'image unique avec un nom accessible, tout comme un élément img HTML. Ceci est requis pour les graphiques SVG statiques (icônes, logos, illustrations) mais pas pour les widgets SVG interactifs ou les SVG purement décoratifs (qui devraient utiliser aria-hidden="true").
Blind and low vision users using screen readers who need SVG images to be announced with their accessible names rather than technical SVG markup, users with cognitive disabilities who benefit from clear image identification, keyboard users navigating through page content who need to understand what visual content represents
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin que les images SVG soient annoncées avec leurs noms accessibles plutôt qu'avec le balisage SVG technique, utilisateurs avec des handicaps cognitifs qui bénéficient d'une identification claire des images, utilisateurs de clavier naviguant dans le contenu de la page qui ont besoin de comprendre ce que représente le contenu visuel
Relevant test criteria: Critères de test pertinents :
- 1.1.1 Non-text Content (Level A) 1.1.1 Contenu non textuel (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Images Images
Impact High Élevé
WCAG 1.1.1 Non-text Content (Level A) WCAG 1.1.1 Contenu non textuel (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[1]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
About this issue:
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image
L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
Inline SVG elements are not automatically treated as images by assistive technologies. Without role="img", screen readers may traverse the SVG's internal DOM structure (paths, circles, polygons), announcing confusing technical details instead of the image's meaning. Some screen readers skip unlabeled SVGs entirely. The role="img" attribute signals to assistive technologies that the SVG should be treated as a single image unit with an accessible name, just like an HTML img element. This is required for static SVG graphics (icons, logos, illustrations) but not for interactive SVG widgets or purely decorative SVGs (which should use aria-hidden="true").
Les éléments SVG en ligne ne sont pas automatiquement traités comme des images par les technologies d'assistance. Sans role="img", les lecteurs d'écran peuvent parcourir la structure DOM interne du SVG (chemins, cercles, polygones), annonçant des détails techniques confus au lieu de la signification de l'image. Certains lecteurs d'écran ignorent entièrement les SVG non étiquetés. L'attribut role="img" signale aux technologies d'assistance que le SVG doit être traité comme une unité d'image unique avec un nom accessible, tout comme un élément img HTML. Ceci est requis pour les graphiques SVG statiques (icônes, logos, illustrations) mais pas pour les widgets SVG interactifs ou les SVG purement décoratifs (qui devraient utiliser aria-hidden="true").
Blind and low vision users using screen readers who need SVG images to be announced with their accessible names rather than technical SVG markup, users with cognitive disabilities who benefit from clear image identification, keyboard users navigating through page content who need to understand what visual content represents
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin que les images SVG soient annoncées avec leurs noms accessibles plutôt qu'avec le balisage SVG technique, utilisateurs avec des handicaps cognitifs qui bénéficient d'une identification claire des images, utilisateurs de clavier naviguant dans le contenu de la page qui ont besoin de comprendre ce que représente le contenu visuel
Relevant test criteria: Critères de test pertinents :
- 1.1.1 Non-text Content (Level A) 1.1.1 Contenu non textuel (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Images Images
Impact High Élevé
WCAG 1.1.1 Non-text Content (Level A) WCAG 1.1.1 Contenu non textuel (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[2]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
About this issue:
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image
L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
Inline SVG elements are not automatically treated as images by assistive technologies. Without role="img", screen readers may traverse the SVG's internal DOM structure (paths, circles, polygons), announcing confusing technical details instead of the image's meaning. Some screen readers skip unlabeled SVGs entirely. The role="img" attribute signals to assistive technologies that the SVG should be treated as a single image unit with an accessible name, just like an HTML img element. This is required for static SVG graphics (icons, logos, illustrations) but not for interactive SVG widgets or purely decorative SVGs (which should use aria-hidden="true").
Les éléments SVG en ligne ne sont pas automatiquement traités comme des images par les technologies d'assistance. Sans role="img", les lecteurs d'écran peuvent parcourir la structure DOM interne du SVG (chemins, cercles, polygones), annonçant des détails techniques confus au lieu de la signification de l'image. Certains lecteurs d'écran ignorent entièrement les SVG non étiquetés. L'attribut role="img" signale aux technologies d'assistance que le SVG doit être traité comme une unité d'image unique avec un nom accessible, tout comme un élément img HTML. Ceci est requis pour les graphiques SVG statiques (icônes, logos, illustrations) mais pas pour les widgets SVG interactifs ou les SVG purement décoratifs (qui devraient utiliser aria-hidden="true").
Blind and low vision users using screen readers who need SVG images to be announced with their accessible names rather than technical SVG markup, users with cognitive disabilities who benefit from clear image identification, keyboard users navigating through page content who need to understand what visual content represents
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin que les images SVG soient annoncées avec leurs noms accessibles plutôt qu'avec le balisage SVG technique, utilisateurs avec des handicaps cognitifs qui bénéficient d'une identification claire des images, utilisateurs de clavier naviguant dans le contenu de la page qui ont besoin de comprendre ce que représente le contenu visuel
Relevant test criteria: Critères de test pertinents :
- 1.1.1 Non-text Content (Level A) 1.1.1 Contenu non textuel (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Images Images
Impact High Élevé
WCAG 1.1.1 Non-text Content (Level A) WCAG 1.1.1 Contenu non textuel (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[3]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
About this issue:
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image
L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
Inline SVG elements are not automatically treated as images by assistive technologies. Without role="img", screen readers may traverse the SVG's internal DOM structure (paths, circles, polygons), announcing confusing technical details instead of the image's meaning. Some screen readers skip unlabeled SVGs entirely. The role="img" attribute signals to assistive technologies that the SVG should be treated as a single image unit with an accessible name, just like an HTML img element. This is required for static SVG graphics (icons, logos, illustrations) but not for interactive SVG widgets or purely decorative SVGs (which should use aria-hidden="true").
Les éléments SVG en ligne ne sont pas automatiquement traités comme des images par les technologies d'assistance. Sans role="img", les lecteurs d'écran peuvent parcourir la structure DOM interne du SVG (chemins, cercles, polygones), annonçant des détails techniques confus au lieu de la signification de l'image. Certains lecteurs d'écran ignorent entièrement les SVG non étiquetés. L'attribut role="img" signale aux technologies d'assistance que le SVG doit être traité comme une unité d'image unique avec un nom accessible, tout comme un élément img HTML. Ceci est requis pour les graphiques SVG statiques (icônes, logos, illustrations) mais pas pour les widgets SVG interactifs ou les SVG purement décoratifs (qui devraient utiliser aria-hidden="true").
Blind and low vision users using screen readers who need SVG images to be announced with their accessible names rather than technical SVG markup, users with cognitive disabilities who benefit from clear image identification, keyboard users navigating through page content who need to understand what visual content represents
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin que les images SVG soient annoncées avec leurs noms accessibles plutôt qu'avec le balisage SVG technique, utilisateurs avec des handicaps cognitifs qui bénéficient d'une identification claire des images, utilisateurs de clavier naviguant dans le contenu de la page qui ont besoin de comprendre ce que représente le contenu visuel
Relevant test criteria: Critères de test pertinents :
- 1.1.1 Non-text Content (Level A) 1.1.1 Contenu non textuel (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Images Images
Impact High Élevé
WCAG 1.1.1 Non-text Content (Level A) WCAG 1.1.1 Contenu non textuel (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[4]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
About this issue:
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image
L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
Inline SVG elements are not automatically treated as images by assistive technologies. Without role="img", screen readers may traverse the SVG's internal DOM structure (paths, circles, polygons), announcing confusing technical details instead of the image's meaning. Some screen readers skip unlabeled SVGs entirely. The role="img" attribute signals to assistive technologies that the SVG should be treated as a single image unit with an accessible name, just like an HTML img element. This is required for static SVG graphics (icons, logos, illustrations) but not for interactive SVG widgets or purely decorative SVGs (which should use aria-hidden="true").
Les éléments SVG en ligne ne sont pas automatiquement traités comme des images par les technologies d'assistance. Sans role="img", les lecteurs d'écran peuvent parcourir la structure DOM interne du SVG (chemins, cercles, polygones), annonçant des détails techniques confus au lieu de la signification de l'image. Certains lecteurs d'écran ignorent entièrement les SVG non étiquetés. L'attribut role="img" signale aux technologies d'assistance que le SVG doit être traité comme une unité d'image unique avec un nom accessible, tout comme un élément img HTML. Ceci est requis pour les graphiques SVG statiques (icônes, logos, illustrations) mais pas pour les widgets SVG interactifs ou les SVG purement décoratifs (qui devraient utiliser aria-hidden="true").
Blind and low vision users using screen readers who need SVG images to be announced with their accessible names rather than technical SVG markup, users with cognitive disabilities who benefit from clear image identification, keyboard users navigating through page content who need to understand what visual content represents
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin que les images SVG soient annoncées avec leurs noms accessibles plutôt qu'avec le balisage SVG technique, utilisateurs avec des handicaps cognitifs qui bénéficient d'une identification claire des images, utilisateurs de clavier naviguant dans le contenu de la page qui ont besoin de comprendre ce que représente le contenu visuel
Relevant test criteria: Critères de test pertinents :
- 1.1.1 Non-text Content (Level A) 1.1.1 Contenu non textuel (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Images Images
Impact High Élevé
WCAG 1.1.1 Non-text Content (Level A) WCAG 1.1.1 Contenu non textuel (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[5]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9
hreflang language code not recognized Code de langue hreflang non reconnu
About this issue:
hreflang language code not recognized
Code de langue hreflang non reconnu
Invalid hreflang codes provide incorrect information about linked resources
Les codes hreflang invalides fournissent des informations incorrectes sur les ressources liées
Screen reader users, search engines
Utilisateurs de lecteurs d'écran, moteurs de recherche
Relevant test criteria: Critères de test pertinents :
- 3.1.1 Language of Page (Level A) 3.1.1 Langue de la page (Niveau A)
Touchpoint Language Langue
Impact Low Faible
WCAG 3.1.1 Language of Page (Level A) WCAG 3.1.1 Langue de la page (Niveau A)
Location
/html/head[1]/link[4]
Code Snippet
<link rel="alternate" hreflang="x-default" href="https://cnib-accesslabs.ca">
In-page link (skip link, table of contents link, or fragment identifier) points to a target element that lacks appropriate tabindex, preventing focus management from working properly when the link is activated Le lien interne (lien d'évitement, lien de table des matières, ou identifiant de fragment) pointe vers un élément cible qui manque de tabindex approprié, empêchant la gestion du focus de fonctionner correctement lorsque le lien est activé
About this issue:
In-page link (skip link, table of contents link, or fragment identifier) points to a target element that lacks appropriate tabindex, preventing focus management from working properly when the link is activated
Le lien interne (lien d'évitement, lien de table des matières, ou identifiant de fragment) pointe vers un élément cible qui manque de tabindex approprié, empêchant la gestion du focus de fonctionner correctement lorsque le lien est activé
When users activate an in-page link (like a skip link or table of contents link), browsers should move both scroll position and keyboard focus to the target element. However, non-interactive elements (like <div>, <span>, <h2>) are not naturally focusable. Without tabindex="-1" on the target, keyboard focus remains at the link while the page scrolls, creating a disconnect between visual position and keyboard position. This is especially problematic for skip links - a user activates "Skip to main content" expecting to bypass navigation, but their keyboard focus stays in the navigation, forcing them to tab through everything anyway. The skip link becomes useless. Screen reader users expect focus to move with the visual position, and when it doesn't, they become disoriented about their location on the page.
Lorsque les utilisateurs activent un lien interne (comme un lien d'évitement ou un lien de table des matières), les navigateurs devraient déplacer à la fois la position de défilement et le focus clavier vers l'élément cible. Cependant, les éléments non-interactifs (comme <div>, <span>, <h2>) ne sont pas naturellement focalisables. Sans tabindex="-1" sur la cible, le focus clavier reste au niveau du lien pendant que la page défile, créant une déconnexion entre la position visuelle et la position du clavier. Ceci est particulièrement problématique pour les liens d'évitement - un utilisateur active "Aller au contenu principal" en s'attendant à contourner la navigation, mais son focus clavier reste dans la navigation, l'obligeant à parcourir tout de même. Le lien d'évitement devient inutile. Les utilisateurs de lecteurs d'écran s'attendent à ce que le focus se déplace avec la position visuelle, et quand ce n'est pas le cas, ils deviennent désorientés quant à leur emplacement sur la page.
Keyboard users relying on skip links to bypass repetitive navigation who find the skip link non-functional, screen reader users who expect focus and reading position to move together, users with motor disabilities who use skip links to reduce keystrokes, users navigating table of contents who expect focus to move to the target heading, users with cognitive disabilities who are confused when focus position doesn't match visual position, and developers implementing WCAG 2.4.1 Bypass Blocks
Utilisateurs de clavier qui s'appuient sur les liens d'évitement pour contourner la navigation répétitive et qui trouvent le lien d'évitement non fonctionnel, utilisateurs de lecteurs d'écran qui s'attendent à ce que le focus et la position de lecture se déplacent ensemble, utilisateurs avec des handicaps moteurs qui utilisent les liens d'évitement pour réduire les frappes de touches, utilisateurs naviguant dans une table des matières qui s'attendent à ce que le focus se déplace vers l'en-tête cible, utilisateurs avec des handicaps cognitifs qui sont confus lorsque la position du focus ne correspond pas à la position visuelle, et développeurs implémentant WCAG 2.4.1 Contournement de blocs
Relevant test criteria: Critères de test pertinents :
- 2.4.1 Bypass Blocks (Level A) 2.4.1 Contourner des blocs (Niveau A)
- 2.4.3 Focus Order (Level A) 2.4.3 Parcours du focus (Niveau A)
Touchpoint Links Liens
Impact High Élevé
WCAG 2.4.1 Bypass Blocks (Level A) WCAG 2.4.1 Contourner des blocs (Niveau A)
WCAG 2.4.3 Focus Order (Level A) WCAG 2.4.3 Parcours du focus (Niveau A)
Location
/html[1]/body[1]/main[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]
Code Snippet
<div id="headline"></div>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//body/a[1]
Code Snippet
<a class="skip-link screen-reader-text" href="#headline">Skip to content</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca" class="wpml-ls-link">
<span class="wpml-ls-native">English</span></a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/fr/" class="wpml-ls-link">
<span class="wpml-ls-native" lang="fr">Français</span><span class="wpml-ls-display"><span class="wpml-ls-bracket"> (<
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//li[@id="menu-item-3805"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//li[@id="menu-item-3806"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/">Become a Tester</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//li[@id="menu-item-6054"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//li[@id="menu-item-3809"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/news/">News</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//li[@id="menu-item-3810"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[1]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Inclusive Built Environment Overview</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Lived Experience Accessibility Testing</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[3]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Navigation & Wayfinding</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[4]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/accessible-signage/">Accessible Signage</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[5]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/communication-materials/">Communication Materials</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[6]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/workplace-assessment/">Workplace Assessment</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[7]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Research & Planning</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[8]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/be-my-eyes/">Be My Eyes</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[1]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Inclusive Digital Design & Testing Overview</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/lived-user-accessibility-testing/">Lived Experience Accessibility Testing</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[3]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/digital-services/">Digital Services</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[4]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/digital-design-testing/">Digital Design & Testing</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[3]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[4]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/">Become a Tester</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[5]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[6]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/news/">News</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//ul[@id="menu-main-menu-1"]/li[7]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//main[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//div[@id="gspb_container-id-gsbp-edf5c2d5-8bb8"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/">Learn more about Inclusive Built Environments</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//div[@id="gspb_container-id-gsbp-4f6716c3-dcc8"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/"> Learn more about <strong>Accessible Digital Ecosystems</strong></a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//div[@id="gspb_container-id-gsbp-31f96a2b-5331"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/"><strong>Learn more about Lived Experience Acces
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//div[@id="gspb_container-id-gsbp-4df99827-809f"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Learn more about Navigation & Wayfinding</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//div[@id="gspb_container-id-gsbp-785e34dc-9464"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Contact Us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//main[@id="content"]/div[1]/div[12]/div[1]/div[2]/a[1]
Code Snippet
<a class="more-link" href="https://cnib-accesslabs.ca/building-accessible-spaces-with-service-canada/">Continue reading <span class="screen-reader-text">“Building Accessible Spaces with Service Canada
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//main[@id="content"]/div[1]/div[12]/div[2]/div[2]/a[1]
Code Snippet
<a class="more-link" href="https://cnib-accesslabs.ca/breaking-barriers-pcl-graphics-cnib-access-labs/">Continue reading <span class="screen-reader-text">“Breaking Barriers: PCL Graphics & CNIB Ac
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Relevant test criteria: Critères de test pertinents :
- 3.2.4 Consistent Identification (Level AA) 3.2.4 Identification cohérente (Niveau AA)
- 2.1.1 Keyboard (Level A) 2.1.1 Clavier (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 2.1.1 Keyboard (Level A) WCAG 2.1.1 Clavier (Niveau A)
WCAG 3.2.4 Consistent Identification (Level AA) WCAG 3.2.4 Identification cohérente (Niveau AA)
Location
//body/footer[1]/div[1]/div[1]/div[3]/div[1]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/subscribe/">Subscribe</a>
Link containing an image (logo, icon, thumbnail, or img element) has no visible focus indicator when keyboard focused, often due to outline:none or outline:0 removing the default focus styling Lien contenant une image (logo, icône, miniature, ou élément img) n'a pas d'indicateur de focus visible lorsqu'il a le focus clavier, souvent dû à outline:none ou outline:0 supprimant le style de focus par défaut
About this issue:
Link containing an image (logo, icon, thumbnail, or img element) has no visible focus indicator when keyboard focused, often due to outline:none or outline:0 removing the default focus styling
Lien contenant une image (logo, icône, miniature, ou élément img) n'a pas d'indicateur de focus visible lorsqu'il a le focus clavier, souvent dû à outline:none ou outline:0 supprimant le style de focus par défaut
Image links are common for logos, social media icons, product thumbnails, gallery images, and icon-based navigation. Without visible focus indicators, keyboard users cannot tell when these image links have focus, making it impossible to know what will activate when pressing Enter. This is particularly problematic for image-heavy interfaces like galleries, product listings, and icon navigation where image links may be the primary or only way to access content. Users may accidentally activate the wrong image link because they couldn't see which one had focus, or may tab past important image links without realizing they were there. The problem is compounded when image links are small (like social media icons) - without clear focus indication, users with low vision or attention difficulties cannot locate the focused element. Image links in navigation are especially critical - if users cannot see focus indicators on logo or menu icons, primary site navigation becomes inaccessible.
Les liens images sont courants pour les logos, icônes de réseaux sociaux, miniatures de produits, images de galerie, et navigation basée sur des icônes. Sans indicateurs de focus visibles, les utilisateurs de clavier ne peuvent pas savoir quand ces liens images ont le focus, rendant impossible de savoir ce qui s'activera en appuyant sur Entrée. Ceci est particulièrement problématique pour les interfaces riches en images comme les galeries, listes de produits, et navigation par icônes où les liens images peuvent être le moyen principal ou unique d'accéder au contenu. Les utilisateurs peuvent accidentellement activer le mauvais lien image parce qu'ils ne pouvaient pas voir lequel avait le focus, ou peuvent passer à côté d'importants liens images sans réaliser qu'ils étaient là. Le problème est aggravé quand les liens images sont petits (comme les icônes de réseaux sociaux) - sans indication claire du focus, les utilisateurs malvoyants ou ayant des difficultés d'attention ne peuvent pas localiser l'élément focalisé. Les liens images dans la navigation sont particulièrement critiques - si les utilisateurs ne peuvent pas voir les indicateurs de focus sur les logos ou icônes de menu, la navigation principale du site devient inaccessible.
Keyboard users who cannot see which image link has focus, users with low vision who need clear focus indicators to locate interactive images, users with attention or cognitive difficulties who cannot track invisible focus, users of screen magnification who zoom in and need focus indicators to find their position, users with motor disabilities who carefully target specific image links and need confirmation of focus, users navigating icon-heavy interfaces where image links are the primary interaction method, and mobile keyboard users on tablets where image links are common
Utilisateurs de clavier qui ne peuvent pas voir quel lien image a le focus, utilisateurs malvoyants qui ont besoin d'indicateurs de focus clairs pour localiser les images interactives, utilisateurs avec des difficultés d'attention ou cognitives qui ne peuvent pas suivre un focus invisible, utilisateurs d'agrandissement d'écran qui zooment et ont besoin d'indicateurs de focus pour trouver leur position, utilisateurs avec des handicaps moteurs qui ciblent soigneusement des liens images spécifiques et ont besoin d'une confirmation du focus, utilisateurs naviguant dans des interfaces riches en icônes où les liens images sont la méthode d'interaction principale, et utilisateurs de clavier mobile sur tablettes où les liens images sont courants
Relevant test criteria: Critères de test pertinents :
- 2.4.7 Focus Visible (Level AA) 2.4.7 Visibilité du focus (Niveau AA)
- 1.4.11 Non-text Contrast (Level AA) 1.4.11 Contraste du contenu non textuel (Niveau AA)
Touchpoint Links Liens
Impact High Élevé
WCAG 1.4.11 Non-text Contrast (Level AA) WCAG 1.4.11 Contraste du contenu non textuel (Niveau AA)
WCAG 2.4.7 Focus Visible (Level AA) WCAG 2.4.7 Visibilité du focus (Niveau AA)
Location
//body/header[1]/div[1]/div[1]/div[1]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/" class="custom-logo-link" rel="home" aria-current="page"><img width="2620" height="1499" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2023/08/23-00
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[1]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/myCNIB/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[2]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://twitter.com/CNIB" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/20
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[3]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/user/cnibnatcomm" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[4]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.instagram.com/cnibfoundation/?hl=en" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmln
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[5]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/cnib/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http:/
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[1]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/myCNIB/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[2]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://twitter.com/CNIB" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/20
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[3]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/user/cnibnatcomm" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[4]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.instagram.com/cnibfoundation/?hl=en" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmln
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[5]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/cnib/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http:/
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[1]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/myCNIB/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[2]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://twitter.com/CNIB" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/20
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[3]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/user/cnibnatcomm" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[4]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.instagram.com/cnibfoundation/?hl=en" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmln
Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Relevant test criteria: Critères de test pertinents :
- 3.2.2 On Input (Level A) 3.2.2 À la saisie (Niveau A)
Touchpoint Links Liens
Impact Medium Moyen
WCAG 3.2.2 On Input (Level A) WCAG 3.2.2 À la saisie (Niveau A)
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[5]/a[1]
Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/cnib/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http:/
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[1]
Code Snippet
<li><img decoding="async" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2022/11/Deer-Lake.jpg?fit=180%2C150&ssl=1" alt="Logo of Deer Lake Regional Airport"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[2]
Code Snippet
<li><img decoding="async" src="https://cnib-accesslabs.ca/wp-content/uploads/2022/11/RBC.svg" alt="Logo of Royal Bank of Canada"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[3]
Code Snippet
<li><img decoding="async" src="https://cnib-accesslabs.ca/wp-content/uploads/2022/11/GTAA.svg" alt="Logo of Greater Toronto Airports Authority"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[4]
Code Snippet
<li><img decoding="async" src="https://cnib-accesslabs.ca/wp-content/uploads/2022/11/AGO.svg" alt="Logo of Art Gallery of Ontario"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[5]
Code Snippet
<li><img decoding="async" src="https://cnib-accesslabs.ca/wp-content/uploads/2022/11/Alberta-Parks.svg" alt="Logo of Alberta Parks"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[6]
Code Snippet
<li><img decoding="async" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2022/11/Saunt-Ste-Marie.png?fit=292%2C100&ssl=1" alt="Logo of Sault STE. Marie"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[7]
Code Snippet
<li><img decoding="async" src="https://cnib-accesslabs.ca/wp-content/uploads/2022/11/Goverment-House.svg" alt="Logo of Government House"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[8]
Code Snippet
<li><img decoding="async" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2023/10/Deloitte_Logo.png?fit=1200%2C488&ssl=1" alt="Deloitte Logo"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[9]
Code Snippet
<li><img decoding="async" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2023/10/Smartlife_Logo_English_Colour.jpg?fit=2758%2C612&ssl=1" alt="Logo of CNIB SmartLife"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/main[1]/div[1]/ul[1]/li[10]
Code Snippet
<li><img decoding="async" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2024/01/TP_Horizontal_CenteredRight_Colour.jpg?fit=1500%2C465&ssl=1" alt="Toronto Pearson International Airpo
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[1]
Code Snippet
<li><img decoding="async" class="wp-image-4858" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Logo-White.png" alt="CNIB Foundation" srcset="h
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[2]
Code Snippet
<li><img decoding="async" class="wp-image-4866" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_EN_withTM.png" alt="Vision Loss Rehabilit
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[3]
Code Snippet
<li><img decoding="async" class="wp-image-4860" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_ENG.png" alt="Deafblind Community Ser
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[4]
Code Snippet
<li><img decoding="async" class="wp-image-4854" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_ENG.png" alt="
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[1]
Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_ONLY_Wht_FRE_.png" alt="INCA"></li>
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[2]
Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4866" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_FR_withMC.png" alt="Readaptation En Defic
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[3]
Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4860" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_FR.png" alt="Services Communautaires
List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Relevant test criteria: Critères de test pertinents :
- 1.3.1 Info and Relationships (Level A) 1.3.1 Information et relations (Niveau A)
- 4.1.2 Name, Role, Value (Level A) 4.1.2 Name, Role, Value (Level A)
Touchpoint Lists Listes
Impact Medium Moyen
WCAG 1.3.1 Info and Relationships (Level A) WCAG 1.3.1 Information et relations (Niveau A)
WCAG 4.1.2 Name, Role, Value (Level A) WCAG 4.1.2 Name, Role, Value (Level A)
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[4]
Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4854" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_FRE.png" alt="
Navigation menu lacks visual styling to indicate the current page (typically highlighting, bold text, underline, or background color), forcing screen magnifier users to pan between the menu and page content to determine their location Le menu de navigation manque de style visuel pour indiquer la page courante (typiquement surlignage, texte gras, soulignement, ou couleur d'arrière-plan), forçant les utilisateurs de loupe d'écran à faire des panoramiques entre le menu et le contenu de la page pour déterminer leur emplacement
About this issue:
Navigation menu lacks visual styling to indicate the current page (typically highlighting, bold text, underline, or background color), forcing screen magnifier users to pan between the menu and page content to determine their location
Le menu de navigation manque de style visuel pour indiquer la page courante (typiquement surlignage, texte gras, soulignement, ou couleur d'arrière-plan), forçant les utilisateurs de loupe d'écran à faire des panoramiques entre le menu et le contenu de la page pour déterminer leur emplacement
Screen magnifier users at high magnification levels (200%-400%+) can only see a small portion of the screen at once - typically not enough to view both the navigation menu and the page heading simultaneously. Without a clear visual indicator in the navigation showing which item represents the current page, magnifier users must constantly pan back and forth between the menu area and the page content area to compare the heading text with menu items to figure out where they are in the site structure. This creates significant cognitive load and navigation friction. Sighted users without magnification can instantly glance at the menu to see the highlighted current page, but magnifier users lose this affordance when visual styling is absent. While aria-current="page" helps screen reader users, it provides no visual indication - both programmatic AND visual indicators are needed to serve all users.
Les utilisateurs de loupe d'écran à des niveaux de grossissement élevés (200%-400%+) ne peuvent voir qu'une petite portion de l'écran à la fois - typiquement pas assez pour voir simultanément le menu de navigation et le titre de la page. Sans un indicateur visuel clair dans la navigation montrant quel élément représente la page courante, les utilisateurs de loupe doivent constamment faire des panoramiques entre la zone du menu et la zone du contenu de la page pour comparer le texte du titre avec les éléments du menu afin de déterminer où ils se trouvent dans la structure du site. Cela crée une charge cognitive significative et des frictions de navigation. Les utilisateurs voyants sans grossissement peuvent instantanément jeter un coup d'œil au menu pour voir la page courante surlignée, mais les utilisateurs de loupe perdent cette affordance quand le style visuel est absent. Bien qu'aria-current="page" aide les utilisateurs de lecteurs d'écran, cela ne fournit aucune indication visuelle - les indicateurs programmatiques ET visuels sont nécessaires pour servir tous les utilisateurs.
Users with low vision using screen magnification software (ZoomText, MAGic, OS zoom features) who cannot see the entire page layout at once, users with tunnel vision or other visual field defects who see limited screen area, older users who use browser zoom and struggle to maintain spatial awareness, users with cognitive disabilities who need strong visual cues to maintain orientation, mobile users who zoom into content and lose contextual awareness
Utilisateurs malvoyants utilisant un logiciel de grossissement d'écran (ZoomText, MAGic, fonctions de zoom du système) qui ne peuvent pas voir l'ensemble de la mise en page à la fois, utilisateurs avec une vision tunnel ou d'autres défauts du champ visuel qui voient une zone d'écran limitée, utilisateurs âgés qui utilisent le zoom du navigateur et ont du mal à maintenir la conscience spatiale, utilisateurs avec des handicaps cognitifs qui ont besoin d'indices visuels forts pour maintenir l'orientation, utilisateurs mobiles qui zooment dans le contenu et perdent la conscience contextuelle
Relevant test criteria: Critères de test pertinents :
- 2.4.6 Headings and Labels (Level AA) 2.4.6 En-têtes et étiquettes (Niveau AA)
- 2.4.8 Location (Level AAA) 2.4.8 Localisation (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Navigation Navigation
Impact High Élevé
WCAG 2.4.6 Headings and Labels (Level AA) WCAG 2.4.6 En-têtes et étiquettes (Niveau AA)
WCAG 2.4.8 Location (Level AAA) WCAG 2.4.8 Localisation (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]
Code Snippet
<nav class="menubar-wrapper" aria-label="Header Navigation">
<div class="menubar menubar-desktop">
<div class="menu-wrapper primary-navigation"><ul id="menu-main-menu" c
Navigation menu lacks visual styling to indicate the current page (typically highlighting, bold text, underline, or background color), forcing screen magnifier users to pan between the menu and page content to determine their location Le menu de navigation manque de style visuel pour indiquer la page courante (typiquement surlignage, texte gras, soulignement, ou couleur d'arrière-plan), forçant les utilisateurs de loupe d'écran à faire des panoramiques entre le menu et le contenu de la page pour déterminer leur emplacement
About this issue:
Navigation menu lacks visual styling to indicate the current page (typically highlighting, bold text, underline, or background color), forcing screen magnifier users to pan between the menu and page content to determine their location
Le menu de navigation manque de style visuel pour indiquer la page courante (typiquement surlignage, texte gras, soulignement, ou couleur d'arrière-plan), forçant les utilisateurs de loupe d'écran à faire des panoramiques entre le menu et le contenu de la page pour déterminer leur emplacement
Screen magnifier users at high magnification levels (200%-400%+) can only see a small portion of the screen at once - typically not enough to view both the navigation menu and the page heading simultaneously. Without a clear visual indicator in the navigation showing which item represents the current page, magnifier users must constantly pan back and forth between the menu area and the page content area to compare the heading text with menu items to figure out where they are in the site structure. This creates significant cognitive load and navigation friction. Sighted users without magnification can instantly glance at the menu to see the highlighted current page, but magnifier users lose this affordance when visual styling is absent. While aria-current="page" helps screen reader users, it provides no visual indication - both programmatic AND visual indicators are needed to serve all users.
Les utilisateurs de loupe d'écran à des niveaux de grossissement élevés (200%-400%+) ne peuvent voir qu'une petite portion de l'écran à la fois - typiquement pas assez pour voir simultanément le menu de navigation et le titre de la page. Sans un indicateur visuel clair dans la navigation montrant quel élément représente la page courante, les utilisateurs de loupe doivent constamment faire des panoramiques entre la zone du menu et la zone du contenu de la page pour comparer le texte du titre avec les éléments du menu afin de déterminer où ils se trouvent dans la structure du site. Cela crée une charge cognitive significative et des frictions de navigation. Les utilisateurs voyants sans grossissement peuvent instantanément jeter un coup d'œil au menu pour voir la page courante surlignée, mais les utilisateurs de loupe perdent cette affordance quand le style visuel est absent. Bien qu'aria-current="page" aide les utilisateurs de lecteurs d'écran, cela ne fournit aucune indication visuelle - les indicateurs programmatiques ET visuels sont nécessaires pour servir tous les utilisateurs.
Users with low vision using screen magnification software (ZoomText, MAGic, OS zoom features) who cannot see the entire page layout at once, users with tunnel vision or other visual field defects who see limited screen area, older users who use browser zoom and struggle to maintain spatial awareness, users with cognitive disabilities who need strong visual cues to maintain orientation, mobile users who zoom into content and lose contextual awareness
Utilisateurs malvoyants utilisant un logiciel de grossissement d'écran (ZoomText, MAGic, fonctions de zoom du système) qui ne peuvent pas voir l'ensemble de la mise en page à la fois, utilisateurs avec une vision tunnel ou d'autres défauts du champ visuel qui voient une zone d'écran limitée, utilisateurs âgés qui utilisent le zoom du navigateur et ont du mal à maintenir la conscience spatiale, utilisateurs avec des handicaps cognitifs qui ont besoin d'indices visuels forts pour maintenir l'orientation, utilisateurs mobiles qui zooment dans le contenu et perdent la conscience contextuelle
Relevant test criteria: Critères de test pertinents :
- 2.4.6 Headings and Labels (Level AA) 2.4.6 En-têtes et étiquettes (Niveau AA)
- 2.4.8 Location (Level AAA) 2.4.8 Localisation (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Navigation Navigation
Impact High Élevé
WCAG 2.4.6 Headings and Labels (Level AA) WCAG 2.4.6 En-têtes et étiquettes (Niveau AA)
WCAG 2.4.8 Location (Level AAA) WCAG 2.4.8 Localisation (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[3]/nav[1]
Code Snippet
<nav aria-label="Footer Navigation"><ul class="footer-submenu wp-block-list">
<li><strong><a href="https://cnib-accesslabs.ca/about-us/" data-type="page" data-id="12">About Us</a></strong></li>
<li
Navigation menu lacks aria-current="page" attribute on the current page link, preventing screen readers from announcing the user's current location in the site navigation Le menu de navigation manque de l'attribut aria-current="page" sur le lien de la page actuelle, empêchant les lecteurs d'écran d'annoncer l'emplacement actuel de l'utilisateur dans la navigation du site
About this issue:
Navigation menu lacks aria-current="page" attribute on the current page link, preventing screen readers from announcing the user's current location in the site navigation
Le menu de navigation manque de l'attribut aria-current="page" sur le lien de la page actuelle, empêchant les lecteurs d'écran d'annoncer l'emplacement actuel de l'utilisateur dans la navigation du site
This fails WCAG 5.2.4 Accessibility Supported because a common but problematic design pattern relies on a heading immediately after navigation having the same text as a menu item to indicate current page. While this creates a visual connection for sighted users, it provides a terrible experience for screen reader users who must listen to the entire navigation menu (which can be lengthy with many links and submenus) before discovering the matching heading that reveals their current location. Screen reader users cannot "glance" at the menu to see the highlighted item - they must sequentially process every menu item, announcement by announcement, until they hear the subsequent heading. This forces users to rely on inefficient linear navigation when the HTML could natively support immediate location awareness through aria-current="page". The pattern fails Accessibility Supported because it doesn't work well with assistive technology - it creates an unnecessarily poor user experience that could be easily avoided with proper semantic markup.
Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car un motif de conception courant mais problématique s'appuie sur un titre immédiatement après la navigation ayant le même texte qu'un élément de menu pour indiquer la page actuelle. Bien que cela crée une connexion visuelle pour les utilisateurs voyants, cela fournit une expérience terrible pour les utilisateurs de lecteurs d'écran qui doivent écouter tout le menu de navigation (qui peut être long avec de nombreux liens et sous-menus) avant de découvrir le titre correspondant qui révèle leur emplacement actuel. Les utilisateurs de lecteurs d'écran ne peuvent pas "jeter un coup d'œil" au menu pour voir l'élément surligné - ils doivent traiter séquentiellement chaque élément de menu, annonce par annonce, jusqu'à ce qu'ils entendent le titre suivant. Cela force les utilisateurs à s'appuyer sur une navigation linéaire inefficace alors que le HTML pourrait nativement prendre en charge la conscience immédiate de l'emplacement grâce à aria-current="page". Le motif échoue à la Prise en charge de l'accessibilité car il ne fonctionne pas bien avec les technologies d'assistance - il crée une expérience utilisateur inutilement mauvaise qui pourrait être facilement évitée avec un balisage sémantique approprié.
Screen reader users (NVDA, JAWS, VoiceOver, TalkBack) who navigate sequentially through content and cannot visually scan for highlighted menu items, users with cognitive disabilities who need immediate feedback about their current location without processing lengthy navigation lists, mobile screen reader users on touch devices who navigate more slowly through menus, users with reading difficulties who struggle to remember their location while processing long lists of links
Utilisateurs de lecteurs d'écran (NVDA, JAWS, VoiceOver, TalkBack) qui naviguent séquentiellement dans le contenu et ne peuvent pas scanner visuellement les éléments de menu surlignés, utilisateurs avec des handicaps cognitifs qui ont besoin d'un retour immédiat sur leur emplacement actuel sans traiter de longues listes de navigation, utilisateurs de lecteurs d'écran mobiles sur appareils tactiles qui naviguent plus lentement dans les menus, utilisateurs avec des difficultés de lecture qui ont du mal à se souvenir de leur emplacement en traitant de longues listes de liens
Relevant test criteria: Critères de test pertinents :
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Navigation Navigation
Impact High Élevé
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]
Code Snippet
<nav class="menubar-wrapper" aria-label="Header Navigation">
<div class="menubar menubar-desktop">
<div class="menu-wrapper primary-navigation"><ul id="menu-main-menu" c
Navigation menu lacks aria-current="page" attribute on the current page link, preventing screen readers from announcing the user's current location in the site navigation Le menu de navigation manque de l'attribut aria-current="page" sur le lien de la page actuelle, empêchant les lecteurs d'écran d'annoncer l'emplacement actuel de l'utilisateur dans la navigation du site
About this issue:
Navigation menu lacks aria-current="page" attribute on the current page link, preventing screen readers from announcing the user's current location in the site navigation
Le menu de navigation manque de l'attribut aria-current="page" sur le lien de la page actuelle, empêchant les lecteurs d'écran d'annoncer l'emplacement actuel de l'utilisateur dans la navigation du site
This fails WCAG 5.2.4 Accessibility Supported because a common but problematic design pattern relies on a heading immediately after navigation having the same text as a menu item to indicate current page. While this creates a visual connection for sighted users, it provides a terrible experience for screen reader users who must listen to the entire navigation menu (which can be lengthy with many links and submenus) before discovering the matching heading that reveals their current location. Screen reader users cannot "glance" at the menu to see the highlighted item - they must sequentially process every menu item, announcement by announcement, until they hear the subsequent heading. This forces users to rely on inefficient linear navigation when the HTML could natively support immediate location awareness through aria-current="page". The pattern fails Accessibility Supported because it doesn't work well with assistive technology - it creates an unnecessarily poor user experience that could be easily avoided with proper semantic markup.
Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car un motif de conception courant mais problématique s'appuie sur un titre immédiatement après la navigation ayant le même texte qu'un élément de menu pour indiquer la page actuelle. Bien que cela crée une connexion visuelle pour les utilisateurs voyants, cela fournit une expérience terrible pour les utilisateurs de lecteurs d'écran qui doivent écouter tout le menu de navigation (qui peut être long avec de nombreux liens et sous-menus) avant de découvrir le titre correspondant qui révèle leur emplacement actuel. Les utilisateurs de lecteurs d'écran ne peuvent pas "jeter un coup d'œil" au menu pour voir l'élément surligné - ils doivent traiter séquentiellement chaque élément de menu, annonce par annonce, jusqu'à ce qu'ils entendent le titre suivant. Cela force les utilisateurs à s'appuyer sur une navigation linéaire inefficace alors que le HTML pourrait nativement prendre en charge la conscience immédiate de l'emplacement grâce à aria-current="page". Le motif échoue à la Prise en charge de l'accessibilité car il ne fonctionne pas bien avec les technologies d'assistance - il crée une expérience utilisateur inutilement mauvaise qui pourrait être facilement évitée avec un balisage sémantique approprié.
Screen reader users (NVDA, JAWS, VoiceOver, TalkBack) who navigate sequentially through content and cannot visually scan for highlighted menu items, users with cognitive disabilities who need immediate feedback about their current location without processing lengthy navigation lists, mobile screen reader users on touch devices who navigate more slowly through menus, users with reading difficulties who struggle to remember their location while processing long lists of links
Utilisateurs de lecteurs d'écran (NVDA, JAWS, VoiceOver, TalkBack) qui naviguent séquentiellement dans le contenu et ne peuvent pas scanner visuellement les éléments de menu surlignés, utilisateurs avec des handicaps cognitifs qui ont besoin d'un retour immédiat sur leur emplacement actuel sans traiter de longues listes de navigation, utilisateurs de lecteurs d'écran mobiles sur appareils tactiles qui naviguent plus lentement dans les menus, utilisateurs avec des difficultés de lecture qui ont du mal à se souvenir de leur emplacement en traitant de longues listes de liens
Relevant test criteria: Critères de test pertinents :
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Navigation Navigation
Impact High Élevé
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[3]/nav[1]
Code Snippet
<nav aria-label="Footer Navigation"><ul class="footer-submenu wp-block-list">
<li><strong><a href="https://cnib-accesslabs.ca/about-us/" data-type="page" data-id="12">About Us</a></strong></li>
<li
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[1]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-facebook has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[2]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-twitter has-secondary-color has-background-background-color twitter-icon wp-block-social-link"><a rel="noop...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[3]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-youtube has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollow...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[4]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-instagram has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofoll...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[5]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-linkedin has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[1]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-facebook has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[2]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-twitter has-secondary-color has-background-background-color twitter-icon wp-block-social-link"><a rel="noop...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[3]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-youtube has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollow...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[4]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-instagram has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofoll...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[5]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-linkedin has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[1]/span[1]/svg[1]/path[1]
Code Snippet
<path style="fill:#565D66" d="M375.6 529l-293.6 296c-9.4 9.4-24.6 9.4-34 0l-39.6-39.6c-9.4-9.4-9.4-24.6 0-34l237-239.4-237-239.4c-9.4-9.4-9.4-24.6 0-34l39.6-39.6c9.4-9.4 24.6-9.4 34 0l293.6 296c9.4 9....
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[2]/span[1]/svg[1]/path[1]
Code Snippet
<path style="fill:#565D66" d="M375.6 529l-293.6 296c-9.4 9.4-24.6 9.4-34 0l-39.6-39.6c-9.4-9.4-9.4-24.6 0-34l237-239.4-237-239.4c-9.4-9.4-9.4-24.6 0-34l39.6-39.6c9.4-9.4 24.6-9.4 34 0l293.6 296c9.4 9....
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[3]/span[1]/svg[1]/path[1]
Code Snippet
<path style="fill:#565D66" d="M375.6 529l-293.6 296c-9.4 9.4-24.6 9.4-34 0l-39.6-39.6c-9.4-9.4-9.4-24.6 0-34l237-239.4-237-239.4c-9.4-9.4-9.4-24.6 0-34l39.6-39.6c9.4-9.4 24.6-9.4 34 0l293.6 296c9.4 9....
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[4]/span[1]/svg[1]/path[1]
Code Snippet
<path style="fill:#565D66" d="M375.6 529l-293.6 296c-9.4 9.4-24.6 9.4-34 0l-39.6-39.6c-9.4-9.4-9.4-24.6 0-34l237-239.4-237-239.4c-9.4-9.4-9.4-24.6 0-34l39.6-39.6c9.4-9.4 24.6-9.4 34 0l293.6 296c9.4 9....
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[5]/span[1]/svg[1]/path[1]
Code Snippet
<path style="fill:#565D66" d="M375.6 529l-293.6 296c-9.4 9.4-24.6 9.4-34 0l-39.6-39.6c-9.4-9.4-9.4-24.6 0-34l237-239.4-237-239.4c-9.4-9.4-9.4-24.6 0-34l39.6-39.6c9.4-9.4 24.6-9.4 34 0l293.6 296c9.4 9....
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[1]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-facebook has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[2]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-twitter has-secondary-color has-background-background-color twitter-icon wp-block-social-link"><a rel="noop...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[3]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-youtube has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollow...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[4]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-instagram has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofoll...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[5]
Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-linkedin has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[4]
Code Snippet
<style>
img.wp-smiley, img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[5]
Code Snippet
<style>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[6]
Code Snippet
<style>
.jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-shar...</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[8]
Code Snippet
<style>
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #...</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[9]
Code Snippet
<style>
.gspb_container-id-gsbp-0d6c504e-35bc,.gspb_container-id-gsbp-31f96a2b-5331,.gspb_container-id-gsbp-3cf699ae-7780,.gspb_container-id-gsbp-4df99827-809f,.gspb_container-id-gsbp-4f6716c3-dcc8,.gspb_container-id-gsbp-6412e14d-72df,.gspb_container-id-gsbp-6cae7a58-fa70,.gspb_container-id-gsbp-785e34dc-...</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[12]
Code Snippet
<style>/* Workplace accomodations */
.workplaceaccomodation-h1 h1 {
font-size: 50px;
}
/* Blog */
.blog-thumb-inner {
background-size: contain;
}
/* Hide elements
* */
.woocommerce-cart-form__contents .product-thumbnail, .wpml-ls-current-language, .wpml-ls-display {
display: none !important;
}
/...</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact High Élevé
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/style[1]
Code Snippet
<style>
:root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link){background: transparent none;border-color: currentColor;border-width: 2px;border-style: solid;color: currentColor;padding-top: 0.667em;padding-right: 1.33em;padding-bottom: 0.667em;padding-left: 1.33em;}
:root :where(.wp-bloc...</style>
Warnings Avertissements (121)
Site doesn't support prefers-color-scheme media query to adapt to user's operating system color scheme preferences Le site ne prend pas en charge la requête média prefers-color-scheme pour s'adapter aux préférences de schéma de couleurs du système d'exploitation de l'utilisateur
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Colors Couleurs
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html
Code Snippet
<page>
Site doesn't support prefers-contrast media query to adapt to user's operating system high contrast mode preferences Le site ne prend pas en charge la requête média prefers-contrast pour s'adapter aux préférences de mode contraste élevé du système d'exploitation de l'utilisateur
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Colors Couleurs
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html
Code Snippet
<page>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[2]/a[1]/span[1]
Code Snippet
<span class="wpml-ls-native" lang="fr">Français</span>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[1]/div[1]/div[1]/div[1]/h1[1]/strong[1]/strong[1]
Code Snippet
<strong>Your partner in inclusive design</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/h2[1]/strong[1]/strong[1]
Code Snippet
<strong>Our Solutions</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[1]/div[1]/h3[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]
Code Snippet
<strong>Inclusive Built-Environments</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[1]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/">Learn more about Inclusive Built Environments</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[2]/div[1]/h3[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]
Code Snippet
<strong>Accessible Digital Ecosystems</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[2]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/"> Learn more about <strong>Accessible Digital Ecosystems</strong></a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[2]/div[2]/div[1]/a[1]/strong[1]
Code Snippet
<strong>Accessible Digital Ecosystems</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[3]/div[1]/h3[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]
Code Snippet
<strong>Accessibility & Usability Testing</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[3]/div[2]/div[1]/a[1]/strong[1]
Code Snippet
<strong>Learn more about Lived Experience Accessibility Testing</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[4]/div[1]/h3[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]
Code Snippet
<strong>Navigation & Wayfinding Solutions</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[4]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Learn more about Navigation & Wayfinding</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[5]/div[1]/h3[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]
Code Snippet
<strong>Accessibility Research & Planning</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[4]/div[1]/div[5]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Contact Us</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/h2[1]/strong[1]
Code Snippet
<strong>What’s your business goal?</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[1]/span[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Social impact through inclusive spaces</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[2]/span[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Elevate customer experiences</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[3]/span[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Maximize revenue through digital accessibility</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[4]/span[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Build accessible pathways</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[5]/span[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Due diligence, insights, and brand reach</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/h2[1]/strong[1]
Code Snippet
<strong>Our Partners</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/h2[2]/strong[1]
Code Snippet
<strong>Read all about it</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[12]/div[1]/a[1]/h3[1]
Code Snippet
<h3>Building Accessible Spaces with Service Canada</h3>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[12]/div[1]/div[2]/a[1]
Code Snippet
<a class="more-link" href="https://cnib-accesslabs.ca/building-accessible-spaces-with-service-canada/">Continue reading <span class="screen-reader-text">“Building Accessible Spaces with Service Canada
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[12]/div[1]/div[2]/a[1]/span[1]
Code Snippet
<span class="screen-reader-text">“Building Accessible Spaces with Service Canada”</span>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[12]/div[2]/a[1]/h3[1]
Code Snippet
<h3>Breaking Barriers: PCL Graphics & CNIB Access Labs</h3>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[12]/div[2]/div[2]/a[1]
Code Snippet
<a class="more-link" href="https://cnib-accesslabs.ca/breaking-barriers-pcl-graphics-cnib-access-labs/">Continue reading <span class="screen-reader-text">“Breaking Barriers: PCL Graphics & CNIB Ac
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[12]/div[2]/div[2]/a[1]/span[1]
Code Snippet
<span class="screen-reader-text">“Breaking Barriers: PCL Graphics & CNIB Access Labs”</span>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[1]/div[1]/div[1]/h2[1]/strong[1]
Code Snippet
<strong>Subscribe to our newsletter</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[1]/div[1]/div[3]/div[1]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/subscribe/">Subscribe</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/h2[1]
Code Snippet
<h2 class="screen-reader-text">Footer</h2>
Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against. Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//*[@id="menu-item-5067"]/button[1]
Code Snippet
<button aria-haspopup="true" aria-expanded="true">Inclusive Built Environment</button>
Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against. Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//*[@id="menu-item-5068"]/button[1]
Code Snippet
<button aria-haspopup="true" aria-expanded="true">Inclusive Digital Design & Testing</button>
Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against. Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//*[@id="menu-main-menu-1"]/li[1]/button[1]
Code Snippet
<button aria-haspopup="true" aria-expanded="true">Inclusive Built Environment</button>
Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against. Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//*[@id="menu-main-menu-1"]/li[2]/button[1]
Code Snippet
<button aria-haspopup="true" aria-expanded="true">Inclusive Digital Design & Testing</button>
Heading is hidden with display:none Le titre est masqué avec display:none
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Headings Titres
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[2]/h3[1]
Code Snippet
<h3 class="has-h-4-font-size french-only" id="have-a-questions-contact-us"><strong>Vous avez des questions? Contactez nous!</strong></h3>
Heading is hidden with display:none Le titre est masqué avec display:none
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Headings Titres
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[8]/h3[1]
Code Snippet
<h3 id="we-are-proud-partners-of" class="has-h-4-font-size french-only"><strong>Nous sommes fiers d'être partenaires de</strong></h3>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//body/a[1]
Code Snippet
<a class="skip-link screen-reader-text" href="#headline">Skip to content</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca" class="wpml-ls-link">
<span class="wpml-ls-native">English</span></a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/fr/" class="wpml-ls-link">
<span class="wpml-ls-native" lang="fr">Français</span><span class="wpml-ls-display"><span class="wpml-ls-bracket"> (<
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//li[@id="menu-item-3805"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//li[@id="menu-item-3806"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/">Become a Tester</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//li[@id="menu-item-6054"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//li[@id="menu-item-3809"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/news/">News</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//li[@id="menu-item-3810"]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[1]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Inclusive Built Environment Overview</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Lived Experience Accessibility Testing</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[3]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Navigation & Wayfinding</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[4]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/accessible-signage/">Accessible Signage</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[5]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/communication-materials/">Communication Materials</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[6]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/workplace-assessment/">Workplace Assessment</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[7]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Research & Planning</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[8]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/be-my-eyes/">Be My Eyes</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[1]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Inclusive Digital Design & Testing Overview</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[2]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/lived-user-accessibility-testing/">Lived Experience Accessibility Testing</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[3]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/digital-services/">Digital Services</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[4]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/digital-design-testing/">Digital Design & Testing</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[3]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[4]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/">Become a Tester</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[5]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[6]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/news/">News</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//ul[@id="menu-main-menu-1"]/li[7]/a[1]
Code Snippet
<a href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//main[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/about-us/">Learn more about us</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//div[@id="gspb_container-id-gsbp-edf5c2d5-8bb8"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/">Learn more about Inclusive Built Environments</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//div[@id="gspb_container-id-gsbp-4f6716c3-dcc8"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/"> Learn more about <strong>Accessible Digital Ecosystems</strong></a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//div[@id="gspb_container-id-gsbp-31f96a2b-5331"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/"><strong>Learn more about Lived Experience Acces
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//div[@id="gspb_container-id-gsbp-4df99827-809f"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Learn more about Navigation & Wayfinding</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//div[@id="gspb_container-id-gsbp-785e34dc-9464"]/div[2]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Contact Us</a>
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//main[@id="content"]/div[1]/div[12]/div[1]/div[2]/a[1]
Code Snippet
<a class="more-link" href="https://cnib-accesslabs.ca/building-accessible-spaces-with-service-canada/">Continue reading <span class="screen-reader-text">“Building Accessible Spaces with Service Canada
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//main[@id="content"]/div[1]/div[12]/div[2]/div[2]/a[1]
Code Snippet
<a class="more-link" href="https://cnib-accesslabs.ca/breaking-barriers-pcl-graphics-cnib-access-labs/">Continue reading <span class="screen-reader-text">“Breaking Barriers: PCL Graphics & CNIB Ac
Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Links Liens
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
//body/footer[1]/div[1]/div[1]/div[3]/div[1]/div[1]/a[1]
Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/subscribe/">Subscribe</a>
List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Lists Listes
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[1]
Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_ONLY_Wht_FRE_.png" alt="INCA"></li>
List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Lists Listes
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[2]
Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4866" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_FR_withMC.png" alt="Readaptation En Defic
List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Lists Listes
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[3]
Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4860" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_FR.png" alt="Services Communautaires
List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Lists Listes
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[4]
Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4854" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_FRE.png" alt="
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[1]
Code Snippet
<div class="wp-block-cover alignfull is-light is-style-image-right" style="min-height:600px;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[2]
Code Snippet
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[5]
Code Snippet
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]
Code Snippet
<div class="wp-block-cover alignfull is-light imagebox-left is-style-image-left" style="min-height:600px;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-primary-bac...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[1]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[2]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[3]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[4]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[6]/div[1]/div[1]/div[2]/div[1]/ul[1]/li[5]/span[1]/svg[1]
Code Snippet
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 384 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M375.6 529l-293.6 296c-9...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[7]
Code Snippet
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[8]/div[1]
Code Snippet
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:900px">
<p class="has-text-align-center">CNIB Access Labs is scaling impact and driving inherent inclusion....
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[9]
Code Snippet
<div style="height:85px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[10]
Code Snippet
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[11]
Code Snippet
<div style="height:38px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[12]/div[1]/div[1]/img[1]
Code Snippet
<img decoding="async" width="620" height="379" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2025/05/Service-Canada-blog.jpg?fit=620%2C379&ssl=1" class="attachment-large size-large ...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[12]/div[2]/div[1]/img[1]
Code Snippet
<img loading="lazy" decoding="async" width="620" height="325" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2024/05/Access-Labs-PCL-graphics-article-1.png?fit=620%2C325&ssl=1" class...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[13]
Code Snippet
<div style="height:124px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/main[1]/div[1]/div[14]
Code Snippet
<div style="height:124px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[1]/div[1]/div[2]/div[1]
Code Snippet
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[1]/div[1]/div[5]/div[1]
Code Snippet
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[1]/figure[1]/img[1]
Code Snippet
<img loading="lazy" decoding="async" width="100" height="100" src="https://cnib-accesslabs.ca/wp-content/uploads//CNIB-Footer.svg" alt="CNIB" class="wp-image-39" style="width:300px;height:109px">
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[6]/div[1]
Code Snippet
<div style="height:100px" aria-hidden="true" class="wp-block-spacer footer-section-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[3]/div[1]
Code Snippet
<div style="height:31px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[6]/div[1]
Code Snippet
<div style="height:14px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[9]/div[1]
Code Snippet
<div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]
Code Snippet
<ul style="list-style-type:none !important;padding-left:0px;" class="english-only">
<li><img decoding="async" class="wp-image-4858" style="float:left;margin:0;" width="25%" src="https://cnib-accessla...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[1]/img[1]
Code Snippet
<img decoding="async" class="wp-image-4858" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Logo-White.png" alt="CNIB Foundation" srcset="https...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[2]/img[1]
Code Snippet
<img decoding="async" class="wp-image-4866" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_EN_withTM.png" alt="Vision Loss Rehabilitatio...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[3]/img[1]
Code Snippet
<img decoding="async" class="wp-image-4860" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_ENG.png" alt="Deafblind Community Service...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[4]/img[1]
Code Snippet
<img decoding="async" class="wp-image-4854" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_ENG.png" alt="CNIB...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]
Code Snippet
<ul style="list-style-type:none !important;padding-left:0px;" class="french-only">
<li><img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslab...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[1]/img[1]
Code Snippet
<img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_ONLY_Wht_FRE_.png" alt="INCA">
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[2]/img[1]
Code Snippet
<img decoding="async" width="25%" class="wp-image-4866" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_FR_withMC.png" alt="Readaptation En Deficienc...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[3]/img[1]
Code Snippet
<img decoding="async" width="25%" class="wp-image-4860" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_FR.png" alt="Services Communautaires Surd...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[4]/img[1]
Code Snippet
<img decoding="async" width="25%" class="wp-image-4854" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_FRE.png" alt="Chie...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[12]/div[1]
Code Snippet
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[1]
Code Snippet
<style>
.wpcf7-submit{
display:none;
}
.recaptcha-btn{
display:block;
}
.grecaptcha-badge {display: none;}
</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[2]
Code Snippet
<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[3]
Code Snippet
<style>
.has-text-align-justify{text-align:justify;}
</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[7]
Code Snippet
<style>
:root{--gs-colorone:#2184f9;--gs-colortwo:#e90000;--gs-colorthree:#2adb32;--gs-colorfour:#696cff;--gs-colorfive:#ff9800;}
</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[10]
Code Snippet
<style>
:root { --font-headings: unset; --font-base: unset; --font-headings-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; --font-base-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica N...</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/head[1]/style[11]
Code Snippet
<style>img#wpstats{display:none}</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Relevant test criteria: Critères de test pertinents :
- 1.4.8 Visual Presentation (Level AAA) 1.4.8 Présentation visuelle (Niveau AAA)
- 5.2.4 Accessibility Supported 5.2.4 Accessibility Supported
Touchpoint Styles Styles
Impact Low Faible
WCAG 1.4.8 Visual Presentation (Level AAA) WCAG 1.4.8 Présentation visuelle (Niveau AAA)
WCAG 5.2.4 Accessibility Supported WCAG 5.2.4 Accessibility Supported
Location
/html[1]/body[1]/style[2]
Code Snippet
<style>
.wp-container-core-columns-is-layout-9d6595d7{flex-wrap:nowrap;}
</style>